<!-- 邀请组件 -->
<template>
  <a-modal
    :visible="modalVisible"
    :title="$t('all.autotext1450')"
    :footer="null"
    @cancel="handleCancel(0)"
  >
    <a-form-model
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      :model="formData"
      :rules="formRules"
      ref="formRef"
    >
      <a-form-model-item :label="$t('all.autotext1142')" prop="researchNo">
        <a-input v-model="formData.researchNo" :placeholder="$t('all.autotext420')" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext977')" prop="name">
        <a-input v-model="formData.name" width="100%"/>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext682')" prop="phone">
        <a-input v-model="formData.phone" width="100%"/>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext44')" prop="email">
        <a-input v-model="formData.email" width="100%"/>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext785')">
        <a-input v-model="hospitalNameProp" disabled width="100%"/>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext622')">
        <a-select v-model="formData.orgDeptId" allowClear>
          <a-select-option v-for="item in departmentListProp" :key="item.id" :value="item.id">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext1334')">
        <a-input v-model="formData.position" />
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext329')" prop="mainResearch">
        <a-select v-model="formData.mainResearch">
          <a-select-option :value="1">{{ $t('all.autotext279') }}</a-select-option>
          <a-select-option :value="0">{{ $t('all.autotext957') }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext898')" prop="roleId">
        <a-select v-model="formData.roleId">
          <!-- 后端定死的只有一条 -->
          <!-- <a-select-option :value="2">PI</a-select-option> -->
          <a-select-option v-for="item in rolesList" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
        </a-select>
      </a-form-model-item>
      <a-form-model-item :label="$t('all.autotext70')" prop="isCheck">
        <a-radio-group v-model="formData.isCheck" name="radioGroup">
          <a-radio :value="1">{{ $t('all.autotext279') }}</a-radio>
          <a-radio :value="0">{{ $t('all.autotext957') }}</a-radio>
        </a-radio-group>
      </a-form-model-item>
      <a-row :gutter="48">
        <a-col :md="24" :sm="24">
          <a-button
            type="primary"
            :loading="submitting"
            @click="handleInvitation"
            style="float: right"
          >
            {{ $t('all.autotext247') }}
          </a-button>
        </a-col>
      </a-row>
    </a-form-model>
  </a-modal>
</template>

<script>
import { addCenterMember, getNewRolesList } from '@/api/overview/member'

export default {
  props: {
    researchId: { // 研究中心Id
      type: [String, Number],
      default: null
    },
    departmentListProp: { // 科室列表
      type: Array,
      default: () => {
        return []
      }
    },
    hospitalNameProp: {
      type: String,
      default: null
    },
    modalVisible: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      proId: '',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 }
      },
      formData: {
        roleId: null,
        isCheck: 0
      },
      isResearch: false,
      formRules: {
        researchNo: [{ required: true, message: this.$t('all.autotext420'), trigger: 'change' }],
        name: [{ required: true, message: this.$t('all.autotext479'), trigger: 'change' }],
        phone: [
          { required: true, message: this.$t('all.autotext396'), trigger: 'change' },
          { pattern: /^(?:(?:\+|00)86)?1[3-9]\d{9}$/, message: this.$t('all.autotext140') }
        ],
        email: [
          { required: false },
          { pattern: /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/, message: this.$t('all.autotext969') }
        ],
        mainResearch: [{ required: true, message: this.$t('all.autotext1196'), trigger: 'change' }],
        roleId: [{ required: true, message: this.$t('all.autotext367'), trigger: 'change' }]
      },
      submitting: false,
      rolesList: []
    }
  },
  created () {
    const pd = localStorage.getItem('CURRENT_PROID')
    if (pd) {
      this.proId = parseInt(pd)
    }
    this.getNewRolesList()
  },
  methods: {
    // 获取角色列表
    getNewRolesList () {
      getNewRolesList({ proId: this.proId })
        .then(res => {
          if (res && res.length) {
            this.rolesList = res.filter(item => item.code === 'Investigator')
          }
        })
    },
    // 点击发送邀请
    handleInvitation () {
      this.$refs.formRef.validate(valid => {
        if (!valid) {
          this.$message.error(this.$t('all.autotext89'))
          return false
        }
        const invitationData = { ...this.formData }
        if (this.proId) {
          invitationData.proId = this.proId
        }
        invitationData.researchId = this.researchId
        this.submitting = true
        addCenterMember({ ...invitationData })
          .then(res => {
            this.submitting = false
            // 成功发送邀请后，通知父组件刷新列表
            this.handleCancel(1)
            this.$message.success(this.$t('all.autotext1386'))
          })
          .catch(() => {
            this.submitting = false
          })
      })
    },
    // 点击取消对话框消失
    handleCancel (val) {
      this.$emit('closeModal', val)
      this.$refs.formRef.resetFields()
      this.formData = {
        roleId: null,
        isCheck: 0
      }
    }
  }
}
</script>
<style scoped lang="scss">

</style>
